import React, { RefObject } from 'react';
import { Input, Button, Avatar } from 'antd';
import styles from './style.less';
import _ from 'lodash';
import { SelectedItem } from '../../data';
import { User } from '@/models/data';

import SimpleBar from 'simplebar-react';

import 'simplebar/dist/simplebar.min.css';
import { ModelState } from '@/pages/system/notice/model';

const { TextArea } = Input;

interface IProps {
  user: User;
  selectedItem: SelectedItem;
  sendMessage: (message: string, callback: () => void) => void;
  chatIM: ModelState;
  resetSelected: () => void;
}

interface IState {
  chatRecords: { type: string; message: string }[];
  areaValue: string;
  usersChatRecords: object;
}

class Index extends React.Component<IProps> {
  contentRef: RefObject<any> = React.createRef();

  state: IState = {
    chatRecords: [],
    areaValue: '',
    usersChatRecords: {},
  };

  send = () => {
    const areaValue = this.state.areaValue;
    const { sendMessage } = this.props;
    sendMessage(areaValue, this.scrollToBottom);
  };

  demo = () => {
    console.log('demo');
  };

  scrollToBottom = () => {
    const current = this.contentRef.current;
    if (current) {
      current.scrollTop = current.scrollHeight;
      console.log('scrollHeight');
      console.log(current.scrollHeight);
      console.log(current.scrollTop);
    }
  };

  render() {
    const {
      selectedItem: { type, id },
      user,
      chatIM,
      resetSelected,
    } = this.props;

    let selected, records;
    if (type === 'user') {
      records = chatIM.secretRecords[id] || [];
      selected = _.filter(chatIM.userList, function(item) {
        return item.id == id;
      }).pop();
    } else if (type === 'room') {
      records = chatIM.roomRecords[id] || [];
      selected = _.filter(chatIM.roomList, function(item) {
        return item.id == id;
      }).pop();
    } else {
      return <div style={{ textAlign: 'center', height: 601 }}>welcome</div>;
    }

    return (
      <div>
        <div className={styles.chatDiv}>
          <div style={{ textAlign: 'center', position: 'absolute', left: 0, right: 0 }}>
            {type === 'room' ? '群组' : '好友'}
            <Avatar
              src={
                selected
                  ? selected.avatar_url
                  : 'https://avatars.dicebear.com/v2/human/buluddke.svg'
              }
              size={'small'}
            />
          </div>
          <SimpleBar
            style={{ height: 450, padding: '5px 15px 5px 10px' }}
            scrollableNodeProps={{ ref: this.contentRef }}
          >
            {records.map((item: any, inx: any) => {
              let searchUser = _.filter(chatIM.userList, function(userInfo) {
                return userInfo.id == item.userId;
              }).pop();

              if (item.userId === user.id) {
                return (
                  <div className={styles.myDialog} key={inx}>
                    <Avatar src={user.avatar_url} size={38} style={{ float: 'right' }} />
                    <div>{item.message}</div>
                  </div>
                );
              } else {
                return (
                  <div className={styles.otherDialog} key={inx}>
                    <Avatar src={searchUser ? searchUser.avatar_url : ''} size={38} />
                    <div>{item.message}</div>
                  </div>
                );
              }
            })}
          </SimpleBar>
        </div>
        <div className={styles.writeDiv}>
          <TextArea
            autosize={{ minRows: 4 }}
            value={this.state.areaValue}
            onChange={event => {
              this.setState({ areaValue: event.target.value });
            }}
          />

          <Button onClick={this.send} style={{ marginTop: '5px' }}>
            发送
          </Button>

          <Button onClick={resetSelected} style={{ marginTop: '5px' }}>
            重置
          </Button>
        </div>
      </div>
    );
  }
}

export default Index;
